<template>
  <!-- 使用需传一个id值过来，用于id和type两个参数值 -->
  <div>
    <el-upload
      ref="myupload"
      action="#"
      name="img"
      :headers="headers"
      :data="data"
      list-type="picture-card"
      :limit="1"
      :on-exceed="handleExceed"
      :http-request="getFileMsg"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <!-- 大图查看按钮 -->
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- 图片删除按钮 -->
          <span
            class="el-upload-list__item-delete"
            @click="handleRemovebutton(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <!-- 大图查看 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { delImgCorporation } from "@/api/login";
import { uploadWkImg } from "@/api/workorder";
export default {
  data() {
    return {
      // 大图的图片地址
      dialogImageUrl: "",
      // 大图的展开
      dialogVisible: false,
      // 请求头
      headers: {},
      // 请求参数
      data: {
        id: "",
        type: "",
      },
      // 存放id的数组
      fileArr: [],
      base64ImgArr: []
    };
  },
  props: ["imgID"],
  created() {
    // 上传参数
    this.headers.token = this.$store.getters.token;
    this.data.id = this.imgID;
    // this.data.type = "id为:" + this.imgID + "的图片";
  },
  methods: {
    // 覆盖上传的默认行为
    getFileMsg(content) {
      this.getBase64(content.file).then(res => {
        this.base64ImgArr.push(
          { base64Pictures: [res] }
        )
      })

      console.log('base64数组 :>> ', this.base64ImgArr);
    },
    // 上传图片base64方法
    uploadBase64() {
      return this.base64ImgArr
      // uploadWkImg(this.base64ImgArr).then(res=> {
      //   console.log('上传成功 :>> ', res)
      //   this.$refs["myupload"].clearFiles()
      // })
    },
    // base64转换
    getBase64(file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
    },
    // 添加文件的钩子
    // handleChange(file, fileList) {
    //   this.fileArr.push(fileList.response.data.pictureId);
    // },
    // 上限钩子
    handleExceed() {
      this.$message({
        message: "已达图片上限",
        type: "warning",
      });
    },
    // 图片删除按钮
    handleRemovebutton(file) {
      // 静态的删除
      this.$refs["myupload"].handleRemove(file);
      // 存放id的数组的删除
      // this.fileArr.splice(file.response.data.pictureId, 1);
      // 删除的网络请求
      // delImgCorporation({ pictureId: file.response.data.pictureId })
      //   .then((res) => {
      //     // 删除成功不提示
      //   })
      //   .catch(() => {
      //     this.$message({
      //       message: "删除图片失败",
      //       type: "error",
      //     });
      //   });
    },
    // 大图查看按钮
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 关闭页面和返回时删除剩余图片
    DeleteRemainingPictures() {
      this.$refs["myupload"].clearFiles()
      // console.log('调用了图片组件的删除方法 :>> ')
      // delImgCorporation({ pictureId: String(this.fileArr) })
      //   .then((res) => {
      //     // 删除成功不提示
      //   })
      //   .catch(() => {
      //     this.$message({
      //       message: "删除图片失败",
      //       type: "error",
      //     });
      //   });
    },
  },
};
</script>

<style>
</style>